<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ page session="false" %>
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
    <title>spring-mvc-showcase</title>
    <META http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="<c:url value="/resources/jquery/1.6/jquery.js" />"></script>
    <script src="<c:url value="/resources/scripts/linkedDropdown.js" />"></script>
    <style>
   .error{  
	   border: solid red 1px;  
	   background-color: lightyellow;  
	   padding: 0 0 0 5;  
   } 

    </style>
</head>
<body>
<div>
<c:if test="${not empty message}">
	<div id="message" class="success">${message}</div>	
</c:if>
<c:if test="${status.error}">
<div id="message" class="error">
<c:forEach var="error" items="${status.errorMessages}">  
<c:out value="${error}" escapeXml="false"/><br/>  
</c:forEach>  
</div>
</c:if>
</div>

<form id="regForm" action="<c:url value="/member/register" />" method="post">
    <table>
        <tr>
            <td>name</td>
            <td><input name="name" /></td>
        </tr>
        <tr>
            <td>loginname</td>
            <td><input name="username" /></td>
        </tr>
        <tr>
            <td>password</td>
            <td><input name="password" /></td>
        </tr>
        <tr>
            <td>email</td>
            <td><input name="email" /></td>
        </tr>
        <tr>
            <td>region</td>
            <td>
                <select name="regionId" id="segionSelector">
                    <c:forEach var="p" items="${provinces}">
                    <option value="${p.id}">${p.name}</option>
                    </c:forEach>
                </select>
            </td>
        </tr>
        <tr>
            <td>member type</td>
            <td id="tdMemberType">
                Personal:<input type="radio" value="person" name="memberType" regType="person"/> 
                Company:<input type="radio" value="company" name="memberType" regType="company" />
            </td>
        </tr>
        <tr>
            <td>tel</td>
            <td><input name="tel" /></td>
        </tr>
        <tr>
            <td>fax</td>
            <td><input name="fax" /></td>
        </tr>
        <tr>
            <td>address</td>
            <td><input name="address" /></td>
        </tr>
        <tr>
            <td>post code</td>
            <td><input name="postCode" /></td>
        </tr>
        <tr>
            <td>mobile</td>
            <td><input name="mobile" /></td>
        </tr>
        <tr>
            <td>desc</td>
            <td><input name="description" /></td>
        </tr>
        <tr class="person_member_prop">
            <td>birthday</td>
            <td><input name="birthday" /></td>
        </tr>
        <tr class="person_member_prop">
            <td>gender</td>
            <td><input name="gender" /></td>
        </tr>
        <tr class="company_member_prop">
            <td>legal person</td>
            <td><input name="legalPerson" /></td>
        </tr>
        <tr class="company_member_prop">
            <td>type</td>
            <td><input name="type" /></td>
        </tr>
        <tr class="company_member_prop">
            <td>website</td>
            <td><input name="website" /></td>
        </tr>
        <tr class="company_member_prop">
            <td>reg no</td>
            <td><input name="regNo" /></td>
        </tr>
        <tr class="company_member_prop">
            <td>biz</td>
            <td><input name="biz" /></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(document).ready(function(){
        $('#segionSelector').change(function(){
            var el = $(this);
            $.getJSON(
                '<c:url value="/region/" />' + el.val(),
                function(d) {
                    alert(d.data);
                    if(d.data.length>0){
                        var html = '<select name="">';
                        var dt = d.data;
                        for(var i=0; i<dt.length; i++){
                            html += '<option value="' + dt[i].id + '">' + dt[i].name + '</option>';
                        }
                        html += '</select>';
                        alert(html);
                        $(html).insertAfter(el);
                    }
                }
            );
        });

        $('#tdMemberType input').click(function(){
            //alert($(this).val());
            var regType = $(this).attr('regType');
            var action = $('#regForm').attr('action');
            $('#regForm').attr('action', action + '/' + regType);
            alert($('#regForm').attr('action'));
        });
    });
</script>